<template>
  <view class="container">
    <!-- 倒计时卡片 -->
    <view class="countdown-card">
      <view class="card-header">
        <text class="current-time">{{ currentDateTime }}</text>
      </view>
      
      <view class="countdown-content">
        <view class="countdown-header">
          <text class="title">{{ countdownTitle }}</text>
          <text class="status">{{ workStatus }}</text>
        </view>

        <view class="countdown-timer">
          <view class="time-block">
            <text class="number">{{ countdown.hours }}</text>
            <text class="unit">小时</text>
          </view>
          <text class="separator">:</text>
          <view class="time-block">
            <text class="number">{{ countdown.minutes }}</text>
            <text class="unit">分钟</text>
          </view>
          <text class="separator">:</text>
          <view class="time-block">
            <text class="number">{{ countdown.seconds }}</text>
            <text class="unit">秒</text>
          </view>
        </view>

        <view class="work-progress" v-if="showWorkProgress">
          <text class="work-duration">今日已工作: {{ workDuration }}</text>
          <view class="progress-bar">
            <text class="time-label start">上班</text>
            <view class="progress" :style="{ width: workProgress + '%' }"></view>
            <text class="time-label end">下班</text>
          </view>
          <view class="time-info">
            <text>{{ currentPeriod }}</text>
            <text>剩余工作时间: {{ remainingWorkTime }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import workTime from '../../mixins/workTime'
import { formatDateTime } from '../../utils/timeCalculator'

export default {
  name: 'Countdown',
  mixins: [workTime],

  data() {
    return {
      timer: null,
      currentDateTime: '',
      countdown: {
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      workProgress: 0,
      remainingWorkTime: ''
    }
  },

  computed: {
    ...mapState({
      workSettings: state => state.workSettings
    }),

    workDuration() {
      if (!this.isWorkday) return '非工作日'
      
      const now = new Date()
      const currentTime = now.getHours() * 60 + now.getMinutes()
      const morningStart = this.getMinutesFromTime(this.workSettings.morningStart)
      const morningEnd = this.getMinutesFromTime(this.workSettings.morningEnd)
      const afternoonStart = this.getMinutesFromTime(this.workSettings.afternoonStart)
      const afternoonEnd = this.getMinutesFromTime(this.workSettings.afternoonEnd)
      
      let workedMinutes = 0
      
      if (currentTime < morningStart) {
        return '未开始工作'
      } else if (currentTime <= morningEnd) {
        // 上午工作时间
        workedMinutes = currentTime - morningStart
      } else if (currentTime < afternoonStart) {
        // 午休时间，只计算上午的工作时间
        workedMinutes = morningEnd - morningStart
      } else if (currentTime <= afternoonEnd) {
        // 下午工作时间
        workedMinutes = (morningEnd - morningStart) + (currentTime - afternoonStart)
      } else {
        // 工作结束
        workedMinutes = (morningEnd - morningStart) + (afternoonEnd - afternoonStart)
      }
      
      const hours = Math.floor(workedMinutes / 60)
      const minutes = workedMinutes % 60
      
      if (hours === 0) {
        return `${minutes}分钟`
      } else if (minutes === 0) {
        return `${hours}小时`
      } else {
        return `${hours}小时${minutes}分钟`
      }
    },

    showWorkProgress() {
      if (!this.isWorkday) return false
      
      const now = new Date()
      const currentTime = now.getHours() * 60 + now.getMinutes()
      const morningStart = this.getMinutesFromTime(this.workSettings.morningStart)
      const morningEnd = this.getMinutesFromTime(this.workSettings.morningEnd)
      const afternoonStart = this.getMinutesFromTime(this.workSettings.afternoonStart)
      const afternoonEnd = this.getMinutesFromTime(this.workSettings.afternoonEnd)
      
      return (currentTime >= morningStart && currentTime < morningEnd) || 
             (currentTime >= afternoonStart && currentTime < afternoonEnd)
    },

    currentPeriod() {
      if (!this.isWorkday) return '非工作日'
      
      const now = new Date()
      const currentTime = now.getHours() * 60 + now.getMinutes()
      const morningStart = this.getMinutesFromTime(this.workSettings.morningStart)
      const morningEnd = this.getMinutesFromTime(this.workSettings.morningEnd)
      const afternoonStart = this.getMinutesFromTime(this.workSettings.afternoonStart)
      const afternoonEnd = this.getMinutesFromTime(this.workSettings.afternoonEnd)
      
      if (currentTime < morningStart) return '工作未开始'
      if (currentTime >= morningStart && currentTime < morningEnd) return '上午工作时间'
      if (currentTime >= morningEnd && currentTime < afternoonStart) return '午休时间'
      if (currentTime >= afternoonStart && currentTime < afternoonEnd) return '下午工作时间'
      return '工作已结束'
    },

    countdownTitle() {
      const now = new Date()
      const currentTime = now.getHours() * 60 + now.getMinutes()
      const morningStart = this.getMinutesFromTime(this.workSettings.morningStart)
      const morningEnd = this.getMinutesFromTime(this.workSettings.morningEnd)
      const afternoonStart = this.getMinutesFromTime(this.workSettings.afternoonStart)
      const afternoonEnd = this.getMinutesFromTime(this.workSettings.afternoonEnd)
      
      if (!this.isWorkday) return '距离下个工作日'
      if (currentTime < morningStart) return '距离上班'
      if (currentTime >= morningStart && currentTime < morningEnd) return '距离下班'
      if (currentTime >= morningEnd && currentTime < afternoonStart) return '距离下午上班'
      if (currentTime >= afternoonStart && currentTime < afternoonEnd) return '距离下班'
      return '距离明天上班'
    },

    workStatus() {
      const now = new Date()
      const currentTime = now.getHours() * 60 + now.getMinutes()
      const morningStart = this.getMinutesFromTime(this.workSettings.morningStart)
      const morningEnd = this.getMinutesFromTime(this.workSettings.morningEnd)
      const afternoonStart = this.getMinutesFromTime(this.workSettings.afternoonStart)
      const afternoonEnd = this.getMinutesFromTime(this.workSettings.afternoonEnd)
      
      if (!this.isWorkday) return '非工作日'
      if (currentTime < morningStart) return '未开始'
      if (currentTime >= morningStart && currentTime < morningEnd) return '上午工作中'
      if (currentTime >= morningEnd && currentTime < afternoonStart) return '午休时间'
      if (currentTime >= afternoonStart && currentTime < afternoonEnd) return '下午工作中'
      return '已结束'
    }
  },

  mounted() {
    this.startTimer()
  },

  beforeDestroy() {
    this.clearTimer()
  },

  methods: {
    startTimer() {
      this.updateTime()
      this.timer = setInterval(this.updateTime, 1000)
    },

    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },

    updateTime() {
      const now = new Date()
      this.currentDateTime = formatDateTime(now)
      
      if (!this.isWorkday) {
        // 计算到下个工作日的时间
        const nextWorkDay = this.getNextWorkDay(now)
        const diffTime = nextWorkDay - now
        this.updateCountdown(diffTime)
        this.workProgress = 0
        this.remainingWorkTime = '等待下个工作日'
        return
      }
      
      const currentTime = now.getHours() * 60 + now.getMinutes()
      const morningStart = this.getMinutesFromTime(this.workSettings.morningStart)
      const morningEnd = this.getMinutesFromTime(this.workSettings.morningEnd)
      const afternoonStart = this.getMinutesFromTime(this.workSettings.afternoonStart)
      const afternoonEnd = this.getMinutesFromTime(this.workSettings.afternoonEnd)
      
      // 判断当前是否在工作时间
      const isInMorningWork = currentTime >= morningStart && currentTime < morningEnd
      const isInAfternoonWork = currentTime >= afternoonStart && currentTime < afternoonEnd
      
      if (currentTime < morningStart) {
        // 上班前
        const startTime = new Date(now)
        startTime.setHours(parseInt(this.workSettings.morningStart.split(':')[0]))
        startTime.setMinutes(parseInt(this.workSettings.morningStart.split(':')[1]))
        startTime.setSeconds(0)
        const diffTime = startTime - now
        this.updateCountdown(diffTime)
        this.workProgress = 0
        this.remainingWorkTime = '等待上班'
      } else if (isInMorningWork || isInAfternoonWork) {
        // 工作时间
        let endTime = new Date(now)
        if (isInMorningWork) {
          // 上午工作时间
          endTime.setHours(parseInt(this.workSettings.morningEnd.split(':')[0]))
          endTime.setMinutes(parseInt(this.workSettings.morningEnd.split(':')[1]))
        } else {
          // 下午工作时间
          endTime.setHours(parseInt(this.workSettings.afternoonEnd.split(':')[0]))
          endTime.setMinutes(parseInt(this.workSettings.afternoonEnd.split(':')[1]))
        }
        endTime.setSeconds(0)
        
        const diffTime = endTime - now
        this.updateCountdown(diffTime)
        
        // 计算工作进度
        const totalWorkMinutes = (morningEnd - morningStart) + (afternoonEnd - afternoonStart)
        let workedMinutes = 0
        if (isInMorningWork) {
          workedMinutes = currentTime - morningStart
        } else if (isInAfternoonWork) {
          workedMinutes = (morningEnd - morningStart) + (currentTime - afternoonStart)
        }
        this.workProgress = (workedMinutes / totalWorkMinutes) * 100
        
        // 更新剩余工作时间
        const remainingMinutes = Math.ceil(diffTime / (1000 * 60))
        const remainingHours = Math.floor(remainingMinutes / 60)
        const remainingMins = remainingMinutes % 60
        this.remainingWorkTime = `${remainingHours}小时${remainingMins}分钟`
      } else if (currentTime >= morningEnd && currentTime < afternoonStart) {
        // 午休时间
        let nextWorkTime = new Date(now)
        nextWorkTime.setHours(parseInt(this.workSettings.afternoonStart.split(':')[0]))
        nextWorkTime.setMinutes(parseInt(this.workSettings.afternoonStart.split(':')[1]))
        nextWorkTime.setSeconds(0)
        
        const diffTime = nextWorkTime - now
        this.updateCountdown(diffTime)
        this.workProgress = ((morningEnd - morningStart) / ((morningEnd - morningStart) + (afternoonEnd - afternoonStart))) * 100
        this.remainingWorkTime = '等待下午上班'
      } else {
        // 工作结束时间
        const tomorrow = this.getNextWorkDay(now)
        const diffTime = tomorrow - now
        this.updateCountdown(diffTime)
        this.workProgress = 100
        this.remainingWorkTime = '等待明天上班'
      }
    },

    updateCountdown(diffTime) {
      const hours = Math.floor(diffTime / (1000 * 60 * 60))
      const minutes = Math.floor((diffTime % (1000 * 60 * 60)) / (1000 * 60))
      const seconds = Math.floor((diffTime % (1000 * 60)) / 1000)
      
      this.countdown = {
        hours: hours.toString().padStart(2, '0'),
        minutes: minutes.toString().padStart(2, '0'),
        seconds: seconds.toString().padStart(2, '0')
      }
    },

    getNextWorkDay(date) {
      const nextDay = new Date(date)
      nextDay.setDate(date.getDate() + 1)
      nextDay.setHours(parseInt(this.workSettings.morningStart.split(':')[0]))
      nextDay.setMinutes(parseInt(this.workSettings.morningStart.split(':')[1]))
      nextDay.setSeconds(0)
      
      while (nextDay.getDay() === 0 || nextDay.getDay() === 6) {
        nextDay.setDate(nextDay.getDate() + 1)
      }
      
      return nextDay
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f8fafc;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.countdown-card {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .current-time {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.9);
    }
  }

  .countdown-content {
    .countdown-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      .title {
        font-size: 24px;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
      }

      .status {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.1);
        padding: 4px 12px;
        border-radius: 12px;
      }
    }

    .countdown-timer {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-bottom: 32px;

      .time-block {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 16px;
        min-width: 80px;
        text-align: center;

        .number {
          font-size: 48px;
          font-weight: 700;
          color: #fff;
          display: block;
          margin-bottom: 4px;
          font-family: monospace;
        }

        .unit {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.7);
        }
      }

      .separator {
        font-size: 32px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.5);
        margin-top: -8px;
      }
    }

    .work-progress {
      .work-duration {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 12px;
        display: block;
      }

      .progress-bar {
        background: rgba(255, 255, 255, 0.1);
        height: 8px;
        border-radius: 4px;
        position: relative;
        margin: 24px 0;

        .progress {
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          background: #fff;
          border-radius: 4px;
          transition: width 0.3s ease;
        }

        .time-label {
          position: absolute;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.7);
          top: -20px;

          &.start {
            left: 0;
          }

          &.end {
            right: 0;
          }
        }
      }

      .time-info {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
}
</style> 